<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Lemon
  Date: 2020/6/18
  Time: 9:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新建服务</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>
<%--layui-form  layui的表单样式，添加到form表单上--%>
<form class="layui-form">
    <div style="width: 99.8%;height: 35px;line-height: 35px;border: 1px #f1f1f1 solid;background-color: #f5f5f5">
        <span style="margin-left: 28px;">服务信息</span>
    </div>
    <%--一个表单项--%>
    <div class="layui-form-item" style="margin-top: 20px">
        <label class="layui-form-label">客户：</label>
        <%--layui-input-inline 行内 block 占整行--%>
        <div class="layui-input-inline" style="width: 280px;">
            <%--lay-verify="required" 必填项--%>
            <select name="customer_id" lay-verify="required">
                <option>请选择</option>
                <c:forEach items="${service}" var="customer">
                    <option value="${customer.customer_id}">${customer.customer_name}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <hr>
    <div class="layui-form-item">
        <label class="layui-form-label">服务主题：</label>
        <div class="layui-input-inline" style="width: 220px">
            <input type="text" name="general" placeholder="请输入服务主题" lay-verify="required" class="layui-input">
        </div>
        <label class="layui-form-label" style="margin-left: 120px">服务时间：</label>
        <div class="layui-input-inline" style="width: 220px">
            <input type="text" name="create_date" id="create_date_div" placeholder="请选择时间" class="layui-input">
        </div>
    </div>
    <hr>
    <div class="layui-form-item">
        <label class="layui-form-label">服务类型：</label>
        <div class="layui-input-inline" style="width: 220px">
            <select name="type" lay-verify="required">
                <option>请选择</option>
                <option>投诉</option>
                <option>咨询</option>
                <option>售后</option>
                <option>售前</option>
                <option>售中</option>
            </select>
        </div>
        <label class="layui-form-label" style="margin-left: 120px">紧急程度：</label>
        <div class="layui-input-inline" style="width: 220px">
            <select name="emergency" lay-verify="required">
                <option>请选择</option>
                <option>非常紧急</option>
                <option>紧急</option>
                <option>一般</option>
            </select>
        </div>
    </div>
    <hr>
    <div class="layui-form-item">
        <label class="layui-form-label">联系电话：</label>
        <div class="layui-input-inline" style="width: 220px">
            <%--lay-verify="number" 必须是11位数字--%>
            <input type="text" name="phone_number" lay-verify="phone" placeholder="请输入联系电话" class="layui-input">
        </div>
    </div>
    <hr>
    <div class="layui-form-item">
        <label class="layui-form-label">服务内容：</label>
        <div class="layui-input-block" style="width: 700px">
            <textarea class="layui-textarea" id="request" name="request"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <%--lay-submit 标识该按钮可以提交表单--%>
        <input type="reset" style="margin-left: 250px" class="layui-btn layui-btn-warm" value="重置">
        <input type="button" lay-filter="add" lay-submit class="layui-btn" value="保存">
    </div>
</form>
<%--引入js--%>
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>
    //layui引入特定模块的方式
    layui.use(['layer', 'form','jquery','laydate','layedit'], function(){
        var layer = layui.layer//layer 弹窗对象
            ,form = layui.form;//表单对象
        var $=layui.$;//jquery对象
        var laydate = layui.laydate;
        var layedit = layui.layedit;

        laydate.render({
            elem: '#create_date_div',
            type: 'datetime'
        });

        layedit.set({
            uploadImage: {//图片上传的接口
                url: '${pageContext.request.contextPath}/service/uploadImg' //接口url
                ,type: 'post' //默认post
            },
            height:200
        });
        var index = layedit.build('request'); //建立编辑器

        //表单提交监听
        form.on("submit(add)",function (data) {
            //将内容同步到textarea
            layedit.sync(index);
            //获取富文本内容
            var text=layedit.getText(index);
            data.field.content=text;
            console.log(data.field);
            //获取表单数据项
            console.log($("form").serialize());
            //发起异步请求，新增 data.field 表单数据
            $.post("${pageContext.request.contextPath}/service/add",$("form").serialize(),function (result) {
                if (result.code==0){
                    layer.msg("新增成功");
                    //刷新父窗口的表格 parent 父窗口对象
                    parent.layui.table.reload("serviceTable",{
                        page:{
                            curr:1
                        }
                    });
                    //关闭本窗口
                    //当你在iframe页面关闭自身时
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                }
                    else {
                        layer.alert("新增失败");
                }
            },"json");
            return false;//阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })
    });
</script>
</body>
</html>
